<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>CSS-宽度高度，对齐 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="CSS记住：能不用 height width 就不用他们，使用 padding ,  line-height 来替代 1.中文对齐 当我要写一个表单，有姓名和联系方式，需要姓和联对齐，名和式对齐。如何去做？  123&amp;lt;span&amp;gt;姓名&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span&amp;gt;联系方式&amp;lt;/span&amp;gt; 1234567891011121314span&amp;#">
<meta name="keywords" content="CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS-宽度高度，对齐">
<meta property="og:url" content="https://storm4542.github.io/archives/422899b1.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="CSS记住：能不用 height width 就不用他们，使用 padding ,  line-height 来替代 1.中文对齐 当我要写一个表单，有姓名和联系方式，需要姓和联对齐，名和式对齐。如何去做？  123&amp;lt;span&amp;gt;姓名&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span&amp;gt;联系方式&amp;lt;/span&amp;gt; 1234567891011121314span&amp;#">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.171Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS-宽度高度，对齐">
<meta name="twitter:description" content="CSS记住：能不用 height width 就不用他们，使用 padding ,  line-height 来替代 1.中文对齐 当我要写一个表单，有姓名和联系方式，需要姓和联对齐，名和式对齐。如何去做？  123&amp;lt;span&amp;gt;姓名&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;&amp;lt;span&amp;gt;联系方式&amp;lt;/span&amp;gt; 1234567891011121314span&amp;#">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-css-宽度高度，对齐" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      CSS-宽度高度，对齐
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h3><p><strong>记住：能不用 height width 就不用他们，使用 padding ,  line-height 来替代</strong></p>
<h4 id="1-中文对齐"><a href="#1-中文对齐" class="headerlink" title="1.中文对齐"></a>1.中文对齐</h4><ul>
<li>当我要写一个表单，有<strong>姓名</strong>和<strong>联系方式</strong>，需要姓和联对齐，名和式对齐。如何去做？</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>联系方式<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>:inline-block;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">5em</span>;</span><br><span class="line">    <span class="attribute">text-align</span>:justify;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">line-height</span>:<span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>:hidden</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line">    <span class="attribute">display</span>:inline-block;</span><br><span class="line">    <span class="attribute">width</span>:<span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><p>当我有很多文字，靠到最右边要换行了，发现文字和最右边有间距怎么办?</p>
<p><code>text-align:justify</code></p>
</li>
</ul>
<h4 id="2-空格问题"><a href="#2-空格问题" class="headerlink" title="2.空格问题"></a>2.空格问题</h4><p>HTML会把两个 inline 元素之间看不见的字符都替换为一个空格，包括空格、TAB、回车。</p>
<p>所以有时候就会莫名其妙中间多一个空格，因为代码里有回车。</p>
<p><strong>解决方法：不用 inline 元素。</strong></p>
<h4 id="3-清除浮动"><a href="#3-清除浮动" class="headerlink" title="3.清除浮动"></a>3.清除浮动</h4><p>在浮动元素的爸爸身上加一个 class </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">clearfix</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">    <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line">    <span class="attribute">display</span>:block;</span><br><span class="line">    <span class="attribute">clear</span>:both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="4-文字中断"><a href="#4-文字中断" class="headerlink" title="4.文字中断"></a>4.文字中断</h4><p>有时候文字太长了超出屏幕了，两种解决方式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>helooooooooooooooooooooooooooooooooooooooooooooooooo<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>上面这种情况下浏览器会认为这是一个单词，一个单词是不会自动换行的。</p>
<p>可以加分隔符</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>helooooooo-ooooooooo-ooooooooo-oooooooo-ooooooo-ooooo-oooo<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>可以使用 word-break</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span> &#123; <span class="attribute">word-break</span>:break-all &#125;</span><br></pre></td></tr></table></figure>
<h4 id="5-文字溢出省略"><a href="#5-文字溢出省略" class="headerlink" title="5.文字溢出省略"></a>5.文字溢出省略</h4><p>当文字的长度超出了 div 的宽度，多余的部分，我们想用省略号代替。</p>
<ul>
<li>一行的时候</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">white-space</span>:nowrap; </span><br><span class="line">    <span class="attribute">overflow</span>:hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>:ellipsis;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>多行</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">      <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">      <span class="attribute">-webkit-line-clamp</span>: <span class="number">3</span>;   <span class="comment">/*3行写3，n行写n */</span></span><br><span class="line">      <span class="attribute">-webkit-box-orient</span>: vertical;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="6-文字垂直居中"><a href="#6-文字垂直居中" class="headerlink" title="6.文字垂直居中"></a>6.文字垂直居中</h4><p>Div 的高度是跟随你文字的行数变化的，所以永远不要使用 height 给 Div 高度</p>
<p>那假如我想要 div 的高度是40px , 怎么办？ 使用 line-height 和 padding </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">line-height</span>:<span class="number">24px</span>;</span><br><span class="line">    <span class="attribute">padding</span>:<span class="number">8px</span> <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">text-align</span>:center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>24 + 8+ 8 = 40</p>
<h4 id="7-margin-合并"><a href="#7-margin-合并" class="headerlink" title="7.margin 合并"></a>7.margin 合并</h4><p>当子元素有 margin 的时候， 父元素如果没有“挡住”它的属性，那么就会出现父子margin 合并。</p>
<p>解决方案 border/ padding/ overflow(不推荐)</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.dad</span>&#123;</span><br><span class="line">    <span class="attribute">border</span>:<span class="number">0.1px</span> solid white;</span><br><span class="line">    <span class="attribute">padding</span>:<span class="number">0.1px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>:hidden</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="8-div-的高度怎么确定的？"><a href="#8-div-的高度怎么确定的？" class="headerlink" title="8.div 的高度怎么确定的？"></a>8.div 的高度怎么确定的？</h4><p>div 的高度是由<strong>文档流</strong>中所有素高度的总和<strong>决定</strong>的。</p>
<p>文档流：内联元素从左到右，块级元素从上到下，块级元素总是另起一行。</p>
<p>所以脱离文档流的翻译就是：算高度别算我。（position:absolute,fixed ;  float; ）</p>
<h4 id="9-内联元素的宽度和高度"><a href="#9-内联元素的宽度和高度" class="headerlink" title="9.内联元素的宽度和高度"></a>9.内联元素的宽度和高度</h4><p>宽度是受 文字的多少 和 margin padding boder 影响。</p>
<p>高度只受行高决定。</p>
<h4 id="10-DIV水平垂直居中"><a href="#10-DIV水平垂直居中" class="headerlink" title="10.DIV水平垂直居中"></a>10.DIV水平垂直居中</h4><p>高度不定，宽度不定的div水平垂直居中 flex </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.dad</span>&#123;</span><br><span class="line">    <span class="attribute">display</span>:flex;</span><br><span class="line">    <span class="attribute">justify-content</span>:center;</span><br><span class="line">    <span class="attribute">align-items</span>:center</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span>&#123;</span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="11-写一个-1-1-的-div"><a href="#11-写一个-1-1-的-div" class="headerlink" title="11.写一个 1:1 的 div"></a>11.写一个 1:1 的 div</h4><p>使用padding撑起高度。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.one</span>&#123;</span><br><span class="line">    <span class="attribute">padding-top</span>:<span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="6a317f77.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Vue 动画
        
      </div>
    </a>
  
  
    <a href="81ea01b1.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">CSS-堆叠上下文</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/422899b1.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
